<template>
<section class="department-list">
  <!-- start btn group -->
  <el-row class="table-control">
    <el-col :span="18">
      <el-button icon="el-icon-plus" size="small" type="primary" plain @click="clickAdd">新增</el-button>
    </el-col>
    <el-col :span="6"></el-col>
  </el-row>
  <!-- end btn group -->
  <!-- start table -->
  <article class="table-data">
    <el-table :data="tableData" border style="width: 100%">
<!--      <el-table-column type="index" label="序号" width="150"></el-table-column>-->
      <el-table-column prop="id" label="id" width="220"></el-table-column>
      <el-table-column prop="name" label="名称" width="220"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="danger" @click="clickDelete(scope.row)" size="mini" plain icon="el-icon-delete" circle title="删除"></el-button>
          <el-button size="mini" @click="clickEdit(scope.row)" circle icon="el-icon-edit" title="编辑"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </article>
  <!-- end table -->
  <!-- start pagination 分页-->
  <el-pagination
                :current-page="pageCurrent" :page-sizes="[50, 100, 200]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="count"
                class="table-pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
  </el-pagination>
  <!-- end pagination -->
  <!-- start 新增模态窗 -->
  <el-dialog title="标签信息" :visible.sync="modalAdd" width="480px" :append-to-body="true" :close-on-click-modal="false">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm" label-suffix="：">
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入标签名称" style="width:280px;" maxlength="20" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="initForm">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
  <!-- end 新增模态窗 -->
</section>
</template>

<script>
export default {
  name: 'JobLabelList', // 标签管理
  data() {
    return {
      modalAdd: false,
      pageCurrent: 1,//默认页码
      pageSize: 50,//默认页的尺寸
      count: 0,//数据的总记录数
      ruleForm: {
        id: '',  // 添加id字段用于编辑
        name: '',
      },
      rules: {
        name: [{
            required: true,
            message: '请输入标签名称',
            trigger: 'blur'
        }],
      },
      tableData: []  // 统一命名为 tableData
    }
  },
  methods: {
    clickAdd() {
      this.dialogType = "add";
      this.modalAdd = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const url = this.dialogType === 'add' ? '/jobLabel/add' : '/jobLabel/edit';
          this.$axios.post(url, this.ruleForm)
            .then(res => {
              if (res.code === 200) {
                this.$message.success(this.dialogType === 'add' ? '添加成功' : '更新成功');
                this.modalAdd = false;
                this.queryList();
                this.resetEdit();
              } else {
                this.$message.error(res.msg || (this.dialogType === 'add' ? '添加失败' : '更新失败'));
              }
            })
            .catch(error => {
              console.error('提交表单出错:', error);
              this.$message.error('操作失败，请稍后重试');
            });
        }
      });
    },
    clickEdit(params) {
      console.log("点击编辑按钮");
      this.dialogType = "edit";
      this.modalAdd = true; //显示对话框
      console.log("编辑传入的参数", params);
      Object.assign(this.ruleForm, params); //数据的回显
      console.log("点击编辑", this.ruleForm);
    },
    initForm() {
      this.modalAdd = false;
      this.resetEdit();
    },
    resetEdit(){
      this.ruleForm = {
        id: '',
        name: ''
      };
    },
    queryList() {
      const params = JSON.stringify({
        pageSize: this.pageSize,
        pageCurrent: this.pageCurrent
      });
      
      this.$axios.post("/jobLabel/list", params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.count = res.data.total;
          this.pageCurrent = res.data.current;
        }else{
          this.$message.error(res.msg || "查询失败");
        }
      });
    },
    clickDelete(row) {
      this.$confirm('此操作将永久删除此项, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          this.deleteLable(row);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    deleteLable(val){
      this.$axios.delete("/jobLabel/delete/"+val.id).then((res) => {
        if (res.code == 200) {
          this.queryList();
          this.$message.success("删除成功");
        }else{
          this.$message.error(res.msg || "删除失败");
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryList();
    },
    handleCurrentChange(val) {
      this.pageCurrent = val;
      this.queryList();
    },
  },
  mounted() {
    this.queryList();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.department-list {}
</style>
